<template>
	<view class="apply-proxy-page">
		<image src="../../static/images/bg_2.png" mode="widthFix" class="bg-img"></image>
		<view class="main-box">
			<view class="form-item">
				<view class="label is-required">姓名</view>
				<view class="value-box">
					<input type="text" class="input" placeholder-class="placeholder" placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label is-required">手机号码</view>
				<view class="value-box">
					<input type="text" class="input" placeholder-class="placeholder" placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">公司名称</view>
				<view class="value-box">
					<input type="text" class="input" placeholder-class="placeholder" placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label-box">
					<view class="">请上传营业执照等资质</view>
					<view class="desc">可上传jpg、png，且不超过500KB</view>
				</view>
				<view class="upload-box">
					<u-upload ref="uUpload" width="160" height="160" :limitType="['jpg','png']" :auto-upload="false"
						:custom-btn="true" :border-bottom="false" :show-progress="false"
						@on-remove="handlePictureRemove" @on-choose-complete="handlePictureUpload">
						<view slot="addBtn" class="button--upload">
							<u-icon name="/static/images/icon_camera.png" width="54" />
						</view>
					</u-upload>
				</view>
			</view>

			<view class="form-item">
				<view class="label-box">
					<view class="">产品图片/视频上传</view>
				</view>
				<view class="upload-box">
					<u-upload ref="uUpload" width="160" height="160" :auto-upload="false" :custom-btn="true"
						:border-bottom="false" :show-progress="false" @on-remove="handlePictureRemove"
						@on-choose-complete="handlePictureUpload">
						<view slot="addBtn" class="button--upload">
							<u-icon name="/static/images/icon_camera.png" width="54" />
						</view>
					</u-upload>
				</view>
			</view>
		</view>
		<view class="footer-box">
			<view class="btn active" @tap="onSubmit">提交申请</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/utils/tools.js';

	const app = getApp()
	export default {

		data() {
			return {
				addressValue: '',
				value: '区域子公司',
				// 表单数据
				form: {
					class_one: '', // 一级分类
					class_oneID: '', // 一级分类ID
					class_two: '', // 二级分类
					class_twoID: '', // 二级分类ID
					remark: '', // 备注
					pictures: [], // 图片
					devices: '', // 设备型号
					params: {}, // 设备参数
					search: '', // 搜索内容
					meid: '', // MEID
					sn: '', // 序列号
				},
			}
		},
		async onLoad(options) {

		},
		async onShow() {

		},

		methods: {
			onSubmit() {
				if (this.value) {

				}
			},

			onClickRadioText(item, index) {
				this.value = item.name
			},

			bindPickerChange(e) {
				console.log(e)
				this.addressValue = e.detail.value.join("/")
			},





			// 图片上传
			handlePictureUpload(lists, index) {
				console.log("lists", lists);
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});

				const len = lists.length;
				const count = this.form.pictures.length;
				for (let i = count; i < len; ++i) {
					const file = {
						...lists[i]
					};
					try {
						uploadFile(file.url).then(res => {
							uni.hideLoading();
							this.form.pictures.push(res.url);
						}).catch(err => {
							uni.hideLoading();
							this.$toast(err.msg || "上传失败");
						});
					} catch (e) {
						uni.hideLoading();
						this.$toast({
							title: "上传失败"
						});
					}
				}
			},

			// 图片删除
			handlePictureRemove(index, lists, name) {
				this.form.pictures.splice(index, 1);
			},
		},
	}
</script>

<style lang="scss">
	@import "index.scss";
</style>